@import "header.html"
<link rel="stylesheet" href="../css/house_res_detail.css">

<body>
    <main id="main">
        <header>
            <div>
                <span class="back" onclick="fxj.closeWin()">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                </span>
            </div>
            <div class="right">
                <span @click="share">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-share-arr-o"></use>
                    </svg>
                </span>
                <span @click="collectHouse(house)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-collect-o" v-show="house.isCollect===0"></use>
                        <use xlink:href="#icon-collect" style="color: #f46800" v-show="house.isCollect===1"></use>
                    </svg>
                </span>
            </div>
        </header>
        <div class="mui-slider" id="banner-gallery" v-cloak>
            <div class="mui-slider-group" :style="'max-height:'+height+'px'+';min-height:'+height+'px'">
                <div class="mui-slider-item" v-for="v of house.imgs">
                    <a class="img-bg-container" v-if="v.rotate==='1'||v.rotate==='0'||!v.rotate">
                        <div :style="'max-height:'+height+'px'+';min-height:'+height+'px'" :data-url="v.surl"></div>
                    </a>
                    <a class="img-bg-container" v-if="v.rotate==='2'">
                        <div class="need-rotate90" :style="'max-height:'+height+'px'+';min-height:'+height+'px'" :data-url="v.surl"></div>
                    </a>
                    <a class="img-bg-container" v-if="v.rotate==='3'">
                        <div class="need-rotate180" :style="'max-height:'+height+'px'+';min-height:'+height+'px'" :data-url="v.surl"></div>
                    </a>
                    <a class="img-bg-container" v-if="v.rotate==='4'">
                        <div class="need-rotate270" :style="'max-height:'+height+'px'+';min-height:'+height+'px'" :data-url="v.surl"></div>
                    </a>
                </div>
            </div>
        </div>

        <section class="house-title">
            <div class="title" v-cloak v-text="house.title"></div>
            <div class="price-info">
                <span class="left">
                    <span>低至￥
                        <span class="money" v-cloak v-text="house.price_low"></span>/晚</span>
                    <span class="price-bg" v-if="!house.officialDiscount" v-text="(house.seven_rebate?'满7天'+house.seven_rebate+'折,':'')+(house.thirty_rebate?'满30天'+house.thirty_rebate+'折':'')"></span>
                </span>
                <span class="right">
                    <span onclick="datePopupShow()">
                        <svg class="icon" aria-hidden="true" style="font-size: 14px">
                            <use xlink:href="#icon-rili"></use>
                        </svg>
                        <span>可租日期</span>
                    </span>
                </span>
            </div>
            <div class="price-info" v-if="house.officialDiscount">
                <span class="left">
                    <span class="price-bg" v-text="'官方活动'+house.officialDiscount.start_date+' : '+house.officialDiscount.end_date"></span>
                </span>
                <span class="right ">
                    <span class="price-bg" v-text="house.officialDiscount.discount+'折'"></span>
                </span>
            </div>
            <div class="label">
                <span :class="{has:house.seven_rebate||house.thirty_rebate}">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhui2"></use>
                    </svg>
                    长租优惠
                </span>
                <span :class="{has:house.realshot!=='0'}">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangji1"></use>
                    </svg>
                    实拍
                </span>
                <span :class="{has:house.detect!=='0'}">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangwurenzheng"></use>
                    </svg>
                    验真
                </span>
            </div>
        </section>

        <section class="house-info">
            <div class="row">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weibiaoti-_fuzhi"></use>
                </svg>
                <div>
                    <h1 v-cloak v-text="(house.house_type?house.house_type:'')+' - '+(house.lease_type?house.lease_type:'')"></h1>
                    <p v-cloak v-text="(house.area?house.area:'')+'平米,'+(house.bedroom?house.bedroom:'')+'室'+(house.hall?house.hall:'')+'厅'+(house.kitchen?house.kitchen:'')+'厨'+(house.bathroom?house.bathroom:'')+'卫'+(house.balcony?house.balcony:'')+'阳台,'+(house.toilet_independent?house.toilet_independent:'')"></p>
                </div>
            </div>
            <div class="row">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-chuang"></use>
                </svg>
                <div>
                    <h1 v-cloak v-text="'共'+(house.bedCount?house.bedCount:'')+'张床 - 可住'+(house.people?house.people:'')+'人'"></h1>
                    <p v-for="bed of house.bedList" v-cloak v-text="(bed.name+bed.amount?bed.name+bed.amount:'')+'张: '+(bed.width?bed.width:'')+'m宽 x '+(bed.length?bed.length:'')+'m长'"></p>
                    <p v-cloak v-text="(house.bed_add==='1'?'能加床, ':'不能加床, ')+(house.people_add?house.people_add:'')+', 被单'+(house.sheet?house.sheet:'')"></p>
                </div>
            </div>
        </section>

        <section class="house-comment" v-if="house.oneComment && house.oneComment.tenant && house.oneComment.tenant.recomment" v-cloak>
            <div class="row">
                <div class="star">
                    <svg v-for="i of 5" class="icon" :class="{'icon-star':Number(i)<=Number(house.starTotal),'icon-star-no':Number(i)>Number(house.starTotal)}"
                        aria-hidden="true">
                        <use :xlink:href="Number(i)<=Number(house.starTotal)?'#icon-star':'#icon-star-o'"></use>
                    </svg>
                </div>

                <div class="remark-num" v-text="(house.starTotal?house.starTotal+'分/':'')+(house.cCount?house.cCount+'点评':'')"></div>
                <a class="more" @click="goPage('comment_list.html',{
                data:{
                    id:house.id
                }
            })">
                    更多
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </a>
            </div>

            <div class="user-info">
                <img :src="house.oneComment.tenant.info.photo" alt="">
                <div>
                    <div class="username" v-cloak v-text="house.oneComment.tenant.info.username"></div>
                    <p v-cloak v-text="'发表于'+house.oneComment.start_date?house.oneComment.start_date:''"></p>
                </div>
            </div>

            <div class="user-comment" v-if="house.oneComment.tenant.recomment" v-cloak v-text="house.oneComment.tenant.recomment.content"></div>
        </section>

        <section class="house-res-introduce">

            <div class="house-info-title">
                <i class="shu-xian"></i>
                <span>房源介绍</span>
                <a class="more" @click="toggleTextEll">
                    更多
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </a>
            </div>

            <p class="description text-ell" v-cloak v-text="house.introduction"></p>

            <i class="horizontal-line"></i>

            <div class="allow-something" v-cloak>
                <div v-for="facility of house.facility" v-if="hasSome.has(facility.facility_id)">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="'#'+hasSome.get(facility.facility_id).style"></use>
                    </svg>
                    <span v-cloak>{{hasSome.get(facility.facility_id).name}}</span>
                </div>
            </div>
        </section>

        <section class="house-location">
            <div class="house-info-title" style="padding: 0 .5rem .5rem .5rem">
                <i class="shu-xian"></i>
                <span>交通位置</span>
                <a class="more" @click="toggleTextEll2('p.path')">
                    更多
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </a>
            </div>

            <p class="path text-ell" style="padding: 0 .5rem" v-cloak>
                {{house.transportation}}
            </p>

            <div class="b-map">
                <div id="map">

                </div>
                <div id="map-des" v-cloak>
                    {{house.city_name}}{{house.district_name}}{{house.street}}{{house.address_detail}}
                </div>
            </div>

            <div class="rim">
                <span>周边情况</span>
                <a class="more" @click="toggleTextEll2('p.rim-description')">
                    更多
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </a>
            </div>

            <p class="rim-description text-ell" v-text="house.environment"></p>

        </section>

        <section class="house-charging-rules">
            <div class="house-info-title">
                <i class="shu-xian"></i>
                <span>收费规则</span>
            </div>

            <div class="rule">
                <div>预付定金：订单经确认后，支付总价的
                    <span class="money">100%</span>
                </div>
                <div>押金收取：在线支付
                    <span class="money" v-cloak>{{house.deposit}}元</span>
                </div>
                <div v-cloak>其他费用：{{house.premium?house.premium:'无'}}</div>
                <div>关于退款：</div>
            </div>

            <div id="canvas">
                <div class="tooltip">
                    <div class="tips tip1">
                        <p>取消订单</p>
                        <p>全额退款</p>
                    </div>
                    <div class="tips tip2">
                        <p>取消订单</p>
                        <p v-cloak>扣除前{{house.cancel_day}}天房费</p>
                    </div>
                    <div class="tips tip3">
                        <p>提前退房</p>
                        <p v-cloak>扣除后{{house.cancel_day}}天订金</p>
                    </div>
                </div>
                <div class="line">
                    <div class="l1"></div>
                    <div class="l2"></div>
                    <div class="l3"></div>
                    <div class="l4"></div>
                    <div class="l5"></div>
                </div>
                <div class="line-text">
                    <p>预定成功</p>
                    <p class="center" v-cloak>入住前{{house.cancel_day}}天14:00</p>
                    <p class="center">入住当天14:00</p>
                    <p style="text-align: right">退房当天12:00</p>
                </div>
            </div>
            <p>温馨提示：房东提供的服务可能会收费，不在以上费用中，请谨慎核对，以免发生纠纷，入住后如您认为照片与房间实质有太大差异，客服将对双方提出的证据进行认定，如属实，未入住天数的费用将全额退款。</p>
        </section>

        <section class="house-notes-in">
            <div class="house-info-title">
                <i class="shu-xian"></i>
                <span>入住须知</span>
            </div>

            <div class="check-in-notice">
                <ul>
                    <li>入住时间: 14:00-24:00</li>
                    <li>退房时间: 12:00以前</li>
                    <li v-cloak>是否接待外宾: {{house.abroad==='1'?'接待':'不接待'}}</li>
                </ul>
                <ul>
                    <li v-cloak>最少入住天数: {{house.day_least}}天</li>
                    <li>最多入住天数: {{house.day_most==='0'?'不限':house.day_most}}</li>
                    <li v-cloak>是否提供发票: {{house.invoice === '0'?'不提供':'提供'}}</li>
                </ul>
            </div>

            <i v-if="house.demand" class="horizontal-line"></i>

            <div v-if="house.demand">房东要求:</div>
            <ul class="landlord-asked" v-if="house.demand">
                <li v-cloak v-text="house.demand"></li>
            </ul>
        </section>

        <section id="nearHouse" class="near-the-houses" v-if="nearHouse.length !==0" v-cloak>
            <div class="title">附近房源</div>
            <div class="mui-slider">
                <div class="mui-slider-indicator">
                    <div v-for="(k, i) of nearHouse" class="mui-indicator" :class="{'mui-active':i===0}"></div>
                </div>
                <div class="mui-slider-group">
                    <div v-for="house of nearHouse" class="mui-slider-item" @click="reloadPageById(house.id)">
                        <div class="house-show">
                            <span class="icon-xin" @click="collectHouse(house)" style="display: none">
                                <svg class="icon" aria-hidden="true" :class="{collected:house.is_collect===1}">
                                    <use xlink:href="#icon-collect"></use>
                                </svg>
                            </span>
                            <img class="house-img" :src="house.img">
                            <span class="money" v-cloak>￥
                                <span>{{house.price_low}}</span>/晚</span>
                        </div>
                        <div>
                            <div class="house-name" v-cloak>
                                {{house.title}}
                                <img class="avatar" :src="house.photo" alt="">
                            </div>
                            <p class="house-des">
                                <span v-cloak>{{house.lease_type}}/可住{{house.people}}人-{{house.score}}分/{{house.comment}}条评论-已定{{house.day}}晚</span>
                                <span v-cloak>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-location-c-o"></use>
                                    </svg>
                                    {{house.distance}}m
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="share-container" style="display: none" v-show="shareBoxShow" onclick="closeShareBox()">
            <div class="share-content">
                <div @click.stop.capture="shareQQ('QZone')">
                    <svg class="icon">
                        <use xlink:href="#icon-qqkongjian2-copy"></use>
                    </svg>
                    <span>QQ空间</span>
                </div>
                <div @click.stop.capture="shareQQ('QFriend')">
                    <svg class="icon">
                        <use xlink:href="#icon-QQ"></use>
                    </svg>
                    <span>QQ好友</span>
                </div>
                <div @click.stop.capture="shareWX('session')">
                    <svg class="icon">
                        <use xlink:href="#icon-weixinhaoyou"></use>
                    </svg>
                    <span>微信好友</span>
                </div>
                <div @click.stop.capture="shareWX('timeline')">
                    <svg class="icon">
                        <use xlink:href="#icon-pengyouquan"></use>
                    </svg>
                    <span>朋友圈</span>
                </div>
                <div @click.stop.capture="shareWeiBo()">
                    <svg class="icon">
                        <use xlink:href="#icon-weibo1"></use>
                    </svg>
                    <span>微博</span>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div>
            <img class="avatar" src="" alt="">
            <div class="user-info">
                <div class="user-des">
                    <span id="gender"></span>
                    <span id="userName"></span>
                </div>
                <div class="user-des user-auth">手机认证 身份认证</div>
            </div>
        </div>
        <a class="chat" @click="chatting(house.uid,house)">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liaotian1"></use>
            </svg>
            <span>聊天</span>
        </a>
        <a class="reserve" :data-id="house.id" onclick="nowReserveHouse()">立即预定</a>

    </footer>

    <div id="bigMapPopup">
        <div id="bigMap"></div>
        <span id="bigMapClose" @click="closeBigMap">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-cha-copy"></use>
            </svg>
        </span>
    </div>

    <!-- 日期选择框框 -->
    <div class="fxj-select-box__container" style="display: none" id="popupDateBox" v-show="popupShow" v-cloak>
        <section class="fxj-select-box__date">
            <div class="fxj-select-box__date--container">
                <section class="fxj-select-box__date--calendar" v-for="month of dateList" v-cloak>
                    <div class="fxj-select-calendar--years" :data-week="month.startWeek" v-cloak>{{month.date}}</div>
                    <div class="fxj-select-calendar--week">
                        <span>日</span>
                        <span>一</span>
                        <span>二</span>
                        <span>三</span>
                        <span>四</span>
                        <span>五</span>
                        <span>六</span>
                    </div>
                    <div class="fxj-select-calendar--day">
                        <span v-for="i of Number(month.startWeek)" v-cloak></span>
                        <div v-for="day of month.child" :class="{'disable':day.ban||!choosable,'ban':day.ban,start:day.start,end:day.end,mid:day.mid}"
                            @click="select(day)" v-cloak>
                            <span class="day" :class="{today:day.outmoded===0}" v-cloak>{{day.outmoded===0?'今天':day.day}}</span>
                            <span class="money" v-cloak>{{day.outmoded
                                <0? '￥'+day.price:day.yet? '已租': '￥'+day.price}}</span>
                        </div>
                    </div>
                </section>
            </div>

            <div class="fxj-select-box__date--header">
                <div class="fxj-select-box__date--title">
                    <span class="fxj-select-box__date--btn" onclick="closeDatePopup()">取消</span>
                    <span class="fxj-select-box__date--dsc">可租日期</span>
                    <span class="fxj-select-box__date--btn" onclick="closeDatePopup()">确定</span>
                </div>
                <div class="fxj-select-box__date--date-info" v-if="choosable" v-cloak>
                    <span>入住：
                        <span class="fxj-select-box__date-num" v-cloak>{{selectDate.start}}</span>
                    </span>
                    <span>离开：
                        <span class="fxj-select-box__date-num" v-cloak>{{selectDate.end}}</span>
                    </span>
                    <span>总共：
                        <span class="fxj-select-box__date-num" v-cloak>{{selectDate.nightNum}}</span>
                    </span>
                </div>
            </div>
        </section>
    </div>

    @import "js.html"
    <script src="http://api.map.baidu.com/api?v=2.0&ak=4mfFj7Ph9nym7oa4e9EkW24KDQF4wavl"></script>
    <script src="../script/house_res_detail.js"></script>
</body>
@import "footer.html"